<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>项目演示</title>
		<style>
			body{
				width: 100%;
				box-sizing: border-box;
				padding-bottom: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				background-color: rgba(176,196,222,.1);
				overflow-y: auto;
				overflow-x: hidden;
			}
			.title{
				width: 100%;
				height: 100px;
				line-height: 100px;
				text-align: center;
				font-size: 33px;
				font-family: '宋体';
				font-weight: bold;
				color: #20B2AA;
			}
			@media screen and (min-width: 1000px) {
				.title{
					margin-top: 50px;
				}
				.content{
					width: 90%;
				}
				ul{
					width: 100%;
					display: flex;
					overflow-x: auto;
					padding: 50px 20px;
				}
				ul::-webkit-scrollbar {
					height: 15px;
					cursor: pointer;  
				}
				ul::-webkit-scrollbar-thumb {
					border-radius: 18px;
					background-color: rgba(32,178,170,0.3);
				}
				ul::-webkit-scrollbar-track {
					border-radius: 18px;
					background: rgba(176,196,222,.3);
				}
				ul>li{
					width: 400px;
					height: 500px;
					flex-wrap: wrap;
					display: flex;
					box-sizing: border-box;
					padding: 0 25px;
				}
				ul>li:nth-child(n+2){
					border-left: 1px solid rgba(176,196,222,.2);
				}
				li:last-child{
					padding-right: 40px;
				}
				.border{
					width: 240px;
					height: 240px;
					margin-left: 55px;
				}
				ol{
					width: 380px;
					height: 200px;
					font-size: 16px;
					justify-content: space-between;
				}
				ol li{
					line-height: 40px;
				}
				ol li:nth-child(n+2) span{
					font-size: 15px;
				}
			}
			@media screen and (max-width: 999px) {
				.content{
					width: 95%;
				}
				ul{
					padding: 20px;
				}
				ul>li{
					width: 100%;
					height: 360px;
				}
				ul>li:nth-child(n+2){
					border-top: 1px solid rgba(176,196,222,.2);
				}
				.border{
					width: 280px;
					height: 280px;
				}
				.border:hover{
					transform: translateX(440px) scale(2);
				}
				ol{
					width: 580px;
					height: 300px;
					font-size: 28px;
					justify-content: space-around;
				}
				ol li:nth-child(n+2) span{
					font-size: 22px;
				}
			}
			.content{
				border: 1px solid rgba(176,196,222,.7);
				border-radius: 10px;
				background-color: white;
				position: relative;
			}
			.bcg{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 40px;
				
			}
			ul{
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				margin: 0;
			}
			ul>li{
				list-style-type: none;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			ol{
				overflow: hidden;
				display: flex;
				flex-direction: column;
				margin: 0;
				padding: 0;
			}
			ol li{
				width: 100%;
				list-style-type: none;
			}
			ol li:first-child{
				display: flex;
				justify-content: space-between;
			}
			ol li:nth-child(n+2) span{
				color: #555555;
			}
			.border{
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8px;
				border: 1px solid rgba(127,255,212,.7);
				background-color: rgba(127,255,212,.1);
				transition: all 0.8s linear;
			}
			img{
				width: 90%;
				height: 90%;
				border-radius: 8px;
			}
		</style>
	</head>
	<body>
		<div class="title">
			★项目列表★
		</div>
		<div class='content'>
			<div class='bcg'></div>
			<ul>
				<li>
					<div class="border">
					  <img src="https://qr.api.cli.im/newqr/create?data=https%253A%252F%252Fopen.weixin.qq.com%252Fsns%252Fgetexpappinfo%253Fappid%253Dwxf84015da33768047%2526amp%253Bpath%253Dpages%252Flogin%252Flogin.html%2523wechat-redirect&level=H&transparent=0&bgcolor=%23ffffff&forecolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&blockpixel=12&marginblock=2&logourl=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Flogo%2F20.png%3Fx-oss-process%3Dstyle%2Flogo_l800&logoshape=ellipse&size=400&text=&embed_text_fontfamily=simhei.ttc&eye_use_fore=1&qrcode_eyes=pin-3.png&outcolor=%23000000&incolor=%23000000&body_type=29&qr_rotate=0&fontfamily=simhei.ttc&qr_frame=0&frame_color=%2329B973&use_frame_color=1&logo_pos=0&fgcolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&bggcolor=%23ffffff&kid=cliim&key=5197c40b30de0bad2e3c27029108cad1" >
					</div>
					<ol>
						<li>
							<span>1.微信订餐小程序</span>
							<a href="javascript:;">微信扫码体验</a>
							<a target="_blank" href="https://gitee.com/xxxxxxd/wxstore">查看源码</a>
						</li>
						<li>技术栈：<span>Uniapp、Vuex、腾讯位置</span></li>
						<li>项目描述：<span>实现了定位、查询、购物车、支付、订单状态、收藏、分享、客服等功能</span></li>
					</ol>
				</li>
				<li>
					<div class="border">
					  <img src="https://qr.api.cli.im/newqr/create?data=https%253A%252F%252Fstatic-fbc6e78c-d19a-4687-995f-5e9afd849172.bspapp.com%252F%2523%252F&level=H&transparent=0&bgcolor=%23ffffff&forecolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&blockpixel=12&marginblock=2&logourl=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Flogo%2F20.png%3Fx-oss-process%3Dstyle%2Flogo_l800&logoshape=ellipse&size=400&text=&embed_text_fontfamily=simhei.ttc&eye_use_fore=1&qrcode_eyes=pin-3.png&outcolor=%23000000&incolor=%23000000&body_type=29&qr_rotate=0&fontfamily=simhei.ttc&qr_frame=0&frame_color=%2329B973&use_frame_color=1&logo_pos=0&fgcolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&bggcolor=%23ffffff&kid=cliim&key=921e652e6e5cf26ae4693e517758988c" >
					</div>
					<ol>
						<li>
							<span>2.智慧餐厅小程序</span>
							<a target="_blank" href="https://static-fbc6e78c-d19a-4687-995f-5e9afd849172.bspapp.com">直接预览</a>
							<a target="_blank" href="https://gitee.com/xxxxxxd/wisdom">查看源码</a>
						</li>
						<li>技术栈：<span>Uniapp、uCharts、图片上传</span></li>
						<li>项目描述：<span>实现了人脸注册、人脸识别、菜品识别、红酒识别、流量统计、食堂监管等功能</span></li>
					</ol>
				</li>
				<li>
					<div class="border">
					  <img src="https://qr.api.cli.im/newqr/create?data=https%253A%252F%252Fxxxxxxd.gitee.io%252Ftest%252F%2523%252F&level=H&transparent=0&bgcolor=%23ffffff&forecolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&blockpixel=12&marginblock=2&logourl=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Flogo%2F20.png%3Fx-oss-process%3Dstyle%2Flogo_l800&logoshape=ellipse&size=400&text=&embed_text_fontfamily=simhei.ttc&eye_use_fore=1&qrcode_eyes=pin-3.png&outcolor=%23000000&incolor=%23000000&body_type=29&qr_rotate=0&fontfamily=simhei.ttc&qr_frame=0&frame_color=%2329B973&use_frame_color=1&logo_pos=0&fgcolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&bggcolor=%23ffffff&kid=cliim&key=2376f8869860d0b40a7f2059ac2c52b6" >
					</div>
					<ol>
						<li>
							<span>3.钉钉点餐管理系统</span>
							<a target="_blank" href="https://xxxxxxd.gitee.io/test">直接预览</a>
							<a target="_blank" href="https://gitee.com/xxxxxxd/seller">查看源码</a>
						</li>
						<li>技术栈：<span>Vue、Echarts、WebSocket、Cookie</span></li>
						<li>项目描述：<span>实现了注册登录、手机端模拟预览、数据增删改查、动态表格、数据统计图表、主题切换、屏幕适配等</span></li>
					</ol>
				</li>
				<li>
					<div class="border">
					  <img src="https://qr.api.cli.im/newqr/create?data=https%253A%252F%252Fxxxxxxd.gitee.io&level=H&transparent=0&bgcolor=%23ffffff&forecolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&blockpixel=12&marginblock=2&logourl=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Flogo%2F20.png%3Fx-oss-process%3Dstyle%2Flogo_l800&logoshape=ellipse&size=400&text=&embed_text_fontfamily=simhei.ttc&eye_use_fore=1&qrcode_eyes=pin-3.png&outcolor=%23000000&incolor=%23000000&body_type=29&qr_rotate=0&fontfamily=simhei.ttc&qr_frame=0&frame_color=%2329B973&use_frame_color=1&logo_pos=0&fgcolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&bggcolor=%23ffffff&kid=cliim&key=f1e9d68b69cee34fbb6e6259d2a9ea1d" >
					</div>
					<ol>
						<li>
							<span>4.Echarts数据可视化</span>
							<a target="_blank" href="https://xxxxxxd.gitee.io">直接预览</a>
							<a target="_blank" href="https://gitee.com/xxxxxxd/echarts2">查看源码</a>
						</li>
						<li>技术栈：<span>Vue、Vuex、Echarts</span></li>
						<li>项目描述：<span>实现了主题切换、数据图表、多级数据联动、热点地图、仪表图、全屏切换、大屏适配、手机适配等</span></li>
					</ol>
				</li>
				<li>
					<div class="border">
					  <img src="https://qr.api.cli.im/newqr/create?data=https%253A%252F%252Fstatic-94d85465-4852-4851-941d-bee3d58cfd43.bspapp.com&level=H&transparent=0&bgcolor=%23ffffff&forecolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&blockpixel=12&marginblock=2&logourl=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Flogo%2F20.png%3Fx-oss-process%3Dstyle%2Flogo_l800&logoshape=ellipse&size=400&text=&embed_text_fontfamily=simhei.ttc&eye_use_fore=1&qrcode_eyes=pin-3.png&outcolor=%23000000&incolor=%23000000&body_type=29&qr_rotate=0&fontfamily=simhei.ttc&qr_frame=0&frame_color=%2329B973&use_frame_color=1&logo_pos=0&fgcolor=https%3A%2F%2Fmhimg.clewm.net%2Fcli%2Fimages%2Fbeautify%2Fnew%2Fforecolor%2F5.png&bggcolor=%23ffffff&kid=cliim&key=663f19eab7fcc6f55a6c1ddf1a213f18" >
					</div>
					<ol>
						<li>
							<span>5.营养分析app测试版</span>
							<a target="_blank" href="https://static-94d85465-4852-4851-941d-bee3d58cfd43.bspapp.com">手机预览</a>
							<a target="_blank" href="https://gitee.com/xxxxxxd/searchdish">查看源码</a>
						</li>
						<li>技术栈：<span>Uniapp</span></li>
						<li>项目描述：<span>根据用户购买菜品和数量，实现综合营养分析与运动建议，并实现单个菜品营养分析详情等</span></li>
					</ol>
				</li>
			</ul>
		</div>
	</body>
</html>
